<template>
	<div id="cardWarehouse" class="same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
						<el-breadcrumb-item>卡库管理</el-breadcrumb-item>
						<el-breadcrumb-item>卡库</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button>	 -->
				</div>
			</div>
			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span">水卡号:</span>
							<el-input size="medium" type="text" placeholder="请输入水卡号" style="width: 160px;" v-model="card_sn">
							</el-input>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

							<el-button type="primary" size="medium" @click="search()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 搜索更多 -->
				<div>
					<div class="same-search-left new-sear-height" ref="leftHeight">
						<div class="same-left-one">
							<span class="same-search-span">水卡状态:</span>
							<el-select size="medium" v-model="status" placeholder="请选择" style="width:140px">
								<el-option v-for="item in selected" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="same-left-one">
							<span class="same-search-span same-search-fisrt">入库时间:</span>
							<el-date-picker style="width:140px" v-model="start_time" type="date" size="medium"
								value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>
							<div class="same-interval">至</div>
							<el-date-picker style="width:140px" v-model="end_time" type="date" size="medium" value-format="yyyy-MM-dd"
								placeholder="结束时间"></el-date-picker>
						</div>
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<el-button type="primary" size="medium" @click="search()">搜索</el-button>
							<el-button type="info" size="medium" @click="reset()">重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
			</div>
		</div>
		<div class="same-table-box">
			<!--<h4 class="same-title-box">卡库</h4>-->
			<div class="table_box">


				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>
						<el-table-column header-align="center" width="50" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*row}}
							</template>
						</el-table-column>

						<el-table-column type="expand">
							<template slot-scope="props">
								<el-form label-position="left" inline class="common-table-expand">
									<el-form-item label="手机号码">
										<span>{{props.row.tel||'——'}}</span>
									</el-form-item>
									<el-form-item label="详细地址">
										<span> {{props.row.address||'——'}}</span>
									</el-form-item>
								</el-form>
							</template>
						</el-table-column>

						<el-table-column align="center" prop="ctime" label="入库时间">
						</el-table-column>

						<el-table-column align="center" label="水卡卡号">
							<template slot-scope="scope">
								{{scope.row.card_sn || '——'}}
							</template>
						</el-table-column>


						<el-table-column align="center" label="用户">
							<template slot-scope="scope">
								{{scope.row.full_name || '——'}}
							</template>
						</el-table-column>



						<el-table-column align="center" prop="btime" label="绑定时间">
						</el-table-column>

						<el-table-column align="center" label="绑定状态">
							<template slot-scope="scope">
								{{scope.row.status || '——'}}
							</template>
						</el-table-column>



						<el-table-column align="center" label="卡类型">
							<template slot-scope="scope">
								{{scope.row.c_type_desc || '——'}}
							</template>
						</el-table-column>

						<el-table-column align="center" label="卡内余额">
							<template slot-scope="scope">
								{{ scope.row.balance|filterNumber }}
							</template>
						</el-table-column>

						<el-table-column align="center" width="350" label="绑定状态">
							<template slot-scope="scope">
								<div v-if="scope.row.water_id">
									<el-link class="custom-link" @click="handleEditShow(scope.row.water_id)">消费记录</el-link>
									<el-link class="custom-link" @click="handleTopUp( scope.row.water_id)">操作记录</el-link>
									<el-link class="custom-link" @click="bind( scope.row.water_id)"
										v-if=" scope.row.card_state == 1 &&  scope.row.status == '已绑定'">挂失</el-link>
									<el-link class="custom-link" @click="unbind( scope.row.water_id)"
										v-if=" scope.row.card_state == 2 &&  scope.row.status == '已绑定'">解挂</el-link>
									<el-link class="custom-link" @click="cancel( scope.row.water_id,  scope.row.card_sn)"
										v-if=" scope.row.card_state != -1 &&  scope.row.status == '已绑定'">解绑</el-link>
								</div>
							</template>
						</el-table-column>

						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>
					<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="pageNo" :page-sizes="sizes" :page-size="row"
							layout="total,prev, pager, next, jumper, sizes" :total="total"></el-pagination>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'cardWarehouse',
		data: function () {
			return {
				row: 15,
				sizes: [15, 30, 40, 50],
				total: 0,
				pageNo: 1,
				start_time: '',
				end_time: '',
				time: '',
				selected: [
					{
						value: '0',
						label: '全部'
					},
					{
						value: '1',
						label: '未绑定'
					},
					{
						value: '2',
						label: '绑定'
					},
					{
						value: '3',
						label: '注销'
					}
				],
				status: '',
				card_sn: '',
				tableData: [],
				loading: false,//加载动画
				isLoad: false,//是否加载数据

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度

			};
		},
		// 初始化执行方法
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏 
			this.waterCardList(); // 获取申请实体卡审核列表
		},
		inject: ['reload'],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			//分页
			handleSizeChange(val) {
				this.row = val;
				this.pageNo = 1;
				this.waterCardList();
			},
			handleCurrentChange(val) {
				this.pageNo = val;
				this.waterCardList();
			},
			//点击消费记录
			handleEditShow(water_id) {
				this.$router.push({
					path: '/expenseCalendar',
					query: { water_id: water_id }
				});
			},
			//点击充值
			handleTopUp(water_id) {
				this.$router.push({
					path: '/operatingData',
					query: { water_id: water_id }
				});
			},
			//解绑
			unbundle() {
				var that = this;
				var content = that.content;
				this.$confirm('挂失后实体卡将不能进行操作?(电子卡可正常使用)', '是否对实体卡-' + content + '-卡号进行挂失!', {
					confirmButtonText: '确认挂失',
					cancelButtonText: '容我想想',
					type: 'warning',
					center: true
				})
					.then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			//挂失
			bind(id) {
				var that = this;
				const h = this.$createElement;
				this.$msgbox({
					title: '是否对该实体卡卡号为进行挂失?',
					message: h('p', { style: 'color: red' }, '挂失后实体卡将不能进行操作。(电子卡可正常使用)'),
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '执行中...';
							setTimeout(() => {
								that.$post({
									url: 'Partner/WaterCard/reportLoss',
									data: {
										id: id
									},
									success: data => {
										if (data.code == 1000) {
											this.$message({
												type: 'success',
												message: '挂失成功!'
											});
											that.waterCardList();
											done();
										} else {
											this.$message({
												type: 'success',
												message: '挂失失败!'
											});
											done();
										}
									}
								});

								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							}, 1000);
						} else {
							done();
						}
					}
				}).then(action => { });
			},
			//挂失
			unbind(id) {
				var that = this;
				const h = this.$createElement;
				this.$msgbox({
					title: '是否对该实体卡卡号为进行解除挂失?',
					message: h('p', { style: 'color: red' }, '解除挂失后实体卡将能进行操作!'),
					showCancelButton: true,
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '执行中...';
							setTimeout(() => {
								that.$post({
									url: 'Partner/WaterCard/unReportLoss',
									data: {
										id: id
									},
									success: data => {
										if (data.code == 1000) {
											this.$message({
												type: 'success',
												message: '解除挂失成功!'
											});
											that.waterCardList();
											done();
										} else {
											this.$message({
												type: 'success',
												message: '解除挂失失败!'
											});
											done();
										}
									}
								});

								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							}, 1000);
						} else {
							done();
						}
					}
				}).then(action => { });
			},
			//注销
			cancel(id, card_sn) {
				var that = this;
				var content = '<p class="pInfo">说明：进行注销操作后，实体卡将不能使用 <br/>（电子卡可以正常使用）</p>';
				var title = '是否对实体卡——卡号' + card_sn + '进行注销？';
				this.$alert(content, title, {
					dangerouslyUseHTMLString: true,
					showClose: false,
					showConfirmButton: true,
					showCancelButton: true,
					center: true,
					cancelButtonText: '我再想想',
					confirmButtonText: '确认注销',
					cancelButtonClass: 'cancelButton',
					confirmButtonClass: 'confirmButton',
					beforeClose: (action, instance, done) => {
						if (action === 'confirm') {
							instance.confirmButtonLoading = true;
							instance.confirmButtonText = '注销中...';
							setTimeout(() => {
								that.$post({
									url: 'Partner/WaterCard/unbind',
									data: {
										sn: card_sn
									},
									success: data => {
										if (data.code == 1000) {
											that.tableData.forEach(function (item, index) {
												if (id == item.water_id) {
													that.$set(that.$data.tableData[index], 'status', '已注销');
												}
											});
											that.$message({
												type: 'success',
												message: `注销成功！`
											});
											done();
										} else {
											that.$message.error(`注销失败！`);
											done();
										}
									}
								});
								setTimeout(() => {
									instance.confirmButtonLoading = false;
								}, 300);
							}, 1000);
						} else {
							done();
						}
					}
				}).then(action => { });
			},
			//搜索查询
			search() {
				this.waterCardList();
			},

			reset() {
				this.start_time = '';
				this.end_time = '';
				this.status = '';
				this.card_sn = '';
				this.pageNo = 1;
				this.waterCardList();
			},
			// 获取申请实体卡审核列表
			waterCardList: function () {
				var that = this;
				that.loading = true; // 开启动画
				that.isLoad = false;
				that.$post({
					url: 'Partner/WaterCard/waterCardLibrary',
					data: {
						row: that.row,
						page: that.pageNo,
						start_time: that.start_time ? that.start_time : '',
						end_time: that.end_time ? that.end_time : '',
						status: that.status,
						card_sn: that.card_sn
					},
					success: data => {
						that.loading = false; // 开启动画
						that.isLoad = true;
						if (data.code == 1000) {
							/* $.each(data.data.data,function(){
																		that.tableData.push(this)
																});*/
							that.tableData = data.data.data;
							that.total = Number(data.data.page.total_number); // 总的数据
							that.pageNo = data.data.page.current_page; // 当前页数
						} else {
							//alert('请求失败或无数据');
							this.$message({
								type: 'error',
								showClose: true,
								message: '请求失败或无数据',
								center: true
							});
						}
					}
				});
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化 
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		},

		beforeRouteLeave(to, from, next) {
			let updates = ["/expenseCalendar", "/operatingData"];
			if (!updates.includes(to.path)) {
				from.meta.keepAlive = false;
			} else {
				from.meta.keepAlive = true;
			}
			next();
		}
	};
</script>

<style>
	#cardWarehouse {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
</style>